<template> 
  <div class="home" ref="home">
    <div ref="huidingbu"></div>
   

    <transition name="fade" appear>
      <router-view></router-view>
    </transition>
    <!-- 登录组件 -->
    <loginComponent></loginComponent>
  
     <el-button class="fixedbtn"  v-if="setIsShow" @click="scrollToTop" icon="el-icon-top" circle></el-button>
  </div>
</template>

<script>
import commonHeader from "@/components/commonHeader"; 
import commonFooter from "@/components/commonFooter";
import searchBox from "@/components/searchBox/searchBox.vue";

import loginComponent from "@/components/loginComponent";
export default {
  name: "home",
  components:{
    commonHeader,commonFooter,loginComponent,searchBox

  },
  data() {
    return {
      
      setIsShow:false,
    }
  },
  
  
  mounted() {
    this.$nextTick(() => { // 确保DOM已经渲染完毕，然后添加监听器到特定的DOM元素上。例如，如果你有一个id为"list"的div元素。
      window.addEventListener('scroll', this.handleScroll);
    });
   
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll); // 使用条件运算符确保元素存在。
  },
  methods: {
    scrollToTop() {
      this.$nextTick(() => {
       window.scrollTo({ top: 0, behavior: 'smooth' });
      });
    },
    handleScroll(event) {
      
      const element = this.$refs.home; // 确保在模板中有对应的ref="myElement"
      if (element) {
        const rect = element.getBoundingClientRect();
        const topDistance = rect.top  
        if(topDistance<-2000){
          this.setIsShow=true
        }else{
          this.setIsShow=false
        }
      }
    }
  },
};
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  // max-height: 100vh;
  min-height: 100vh;
  min-width: 946px;
  overflow: auto;
  background: #F4F6F8;
  .fixedbtn{
    position: fixed;
    bottom: 100px;
    right: 100px;
    z-index: 99999999999999999999999999;
    width: 60px;
    height: 60px;
    font-size: 30px;
  }
}
</style>
